<template>
  <div class="shouye">
    <!-- 需求是将students数据遍历出来 -->
    <ul>
      <li v-for="item in students" :key="item.id">
        <!-- <router-link :to="{ name: 'itemdetail', params: { id: item.id } }"> -->
        <router-link :to="`/itemdetail/${item.id}`">
          <!-- http://localhost:3000/#/shouye/itemdetail?id=03 -->
          <img :src="item.img" alt="" srcset="" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
    <button @click="$router.forward()">testForward</button>
    <button @click="$router.back()">返回</button>
    <button @click="change">跟新一下值</button>
    <h1>{{ info }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        {
          id: "01",
          name: "王洋洋",
          img: require("../assets/img/yangyang.jpg"),
        },
        {
          id: "02",
          name: "chaochao",
          img: require("../assets/img/chaochao.jpg"),
        },
        {
          id: "03",
          name: "jianing",
          img: require("../assets/img/jianing.jpg"),
        },
      ],
      info: "我很喜欢哲书，摸一摸哲书的圆圆的肚子",
    };
  },
  beforeCreate() {
    console.log(1);
  },
  // 进入路由组件前
  beforeRouteEnter(to, from, next) {
    // ...
    console.log("路由守卫");
    console.log(to); //目标路由
    console.log(from); //起始路由
    next((component) => {
      console.log(component);
      console.log(component.students);
    });
    // console.log(this);
    console.log(2);
  },

  beforeRouteLeave(to, from, next) {
    // ...
    console.log("离开222222222");
    console.log(to);
    console.log(from);
    next();
    console.log(this);
  },
  methods: {
    change() {
      this.info = "王洋洋摸了两下";
      console.log(this.$route);
      this.$route.meta.name = "xxxx";
    },
  },
};
</script>

<style lang="scss" scoped>
.shouye {
  ul {
    li {
      img {
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>